<!DOCTYPE html>
<html>

<head>
  <link rel="icon" href="images/拉黑小怪兽.png">
  <style>
    .container {
      background: url("./images/1.jpeg");
      background-size: 1600px 950px;
      background-color: rgba(255, 255, 255, 0.1);
    }

    input[type="password"]::-ms-reveal {
      color: blue;
      background-color: white;
      display: none;
    }

    .password-input input::placeholder {
      color: white;
      /* 设置文本颜色为红色 */
    }

    .contest {
      margin: 0px;
      border: 0px;
      padding: 0px;
      color: white;
      font-size: 2px;
      position: relative;
      left: -50px;
      height: 10px;
    }

    #usertxt {
      left: -45px;
    }

    /*****增加部分******/
    /*眼睛位置定义*/
    #bigBox .inputBox img[id="eye"] {
      position: relative;
      right: -85px;
      bottom: 35px;
      width: 20px;
      height: 15px;
      /* 把鼠标的样式换成小手 */
      cursor: pointer;
    }
  </style>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./css/s.css" />
  <link rel="stylesheet" href="./css/iconfont.css" />
  <title>登录界面</title>
</head>

<body class="container">
  <div id="bigBox">
    <h1>登 录</h1>
    <div class="inputBox">
      <div class="inputText password-input">
        <span class="iconfont icon-username"></span>
        <input id="user" type="text" placeholder="用户名" />
        <p id="usertxt" class="contest"></p>
      </div>
      <div class="inputText password-input">
        <span class="iconfont icon-visible"></span>
        <input id="password" type="password" placeholder="密码" />
        <p id="passwordtxt" class="contest"></p>
      </div>
      <img src="images/闭眼睛 .png" id="eye"> <!--这是眼睛-->
      <!--这是眼睛的js实现-->
      <script>
        var password = document.getElementById("password");
        var eye = document.getElementById("eye");
        var flag = 0;//眼睛是闭上的
        eye.onclick = function () {
          if (flag == 0) {
            password.type = "text";
            eye.src = "images/睁眼睛 .png";//图片换成睁眼的
            flag = 1;
          } else {
            password.type = "password";
            eye.src = "images/闭眼睛 .png";//图片换成闭眼的
            flag = 0;
          }
        }
      </script>
    </div>
    <div>
      <a id="login"><input class="loginButton" type="button" value="登 录" /></a>
    </div>
    <p style="color: white;">还没有账户？<a href="signup.html" style="color: aqua; text-decoration:none">立即创建</a></p>
  </div>
</body>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
  var user = document.getElementById("user");
  var usertxt = document.getElementById("usertxt");
  var password = document.getElementById("password");
  var passwordtxt = document.getElementById("passwordtxt");
  var s1 = 0;
  var s2 = 0;
  user.onblur = function () {
    if (this.value.length <= 0) {
      usertxt.innerHTML = '用户名不能为空';
      s1 = 0;
    }
    else {
      usertxt.innerHTML = '';
      s1 = 1;
    }
  }
  password.onblur = function () {
    if (this.value.length <= 0) {
      passwordtxt.innerHTML = '密码不能为空';
      s2 = 0;
    }
    else {
      passwordtxt.innerHTML = '';
      s2 = 1;
    }
  }
  function findNthOccurrence(str, char, n) {
    var count = 0;
    for (var i = 0; i < str.length; i++) {
      if (str[i] === char) {
        count++;
        if (count === n) {
          return i; // 返回第 n 次出现的位置
        }
      }
    }
    return -1; // 如果找不到第 n 次出现的位置，返回 -1
  }
  var token;
  var userid;
  var login = document.getElementById("login");
  login.addEventListener("mousedown", function (event) {
    var d = {
      "password": password.value,
      "userName": user.value
    }
    if (s1 == 0) {
      usertxt.innerHTML = '用户名不能为空';
      event.preventDefault();
    } else if (s2 == 0) {
      passwordtxt.innerHTML = "请正确输入密码";
      event.preventDefault();
    } else {
      $.ajax({
        method: 'post',
        url: 'http://localhost:7777/login',
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify(d),
        success: function (data, status, xhr) {
          var responseText = xhr.responseText;
          console.log(responseText);
          var x1 = findNthOccurrence(responseText, ":", 1);
          var x2 = findNthOccurrence(responseText, ",", 1);
          var x3 = findNthOccurrence(responseText, "\"", 5);
          var x4 = findNthOccurrence(responseText, "\"", 6);
          var x5 = findNthOccurrence(responseText, "\"", 11);
          var x6 = findNthOccurrence(responseText, "\"", 12);
          var x7 = findNthOccurrence(responseText, "\"", 16);
          var x8 = findNthOccurrence(responseText, "\"", 17);
          if (responseText.includes("200")) {
            login.href = "shouye.html";
            token = responseText.substring(x5 + 1, x6);
            localStorage.setItem("token", token);
            console.log(token);
            userid = responseText.substring(x7 + 2, x8 - 1);
            localStorage.setItem("userid", userid);
            console.log(userid);
            login.click();
          }
          else if (responseText.includes("用户")) {
            usertxt.innerHTML = responseText.substring(x3 + 1, x4);
            event.preventDefault();
          }
          else if (responseText.includes("密码")) {
            passwordtxt.innerHTML = responseText.substring(x3 + 1, x4);
            event.preventDefault();
          }
          token = responseText.substring(x5 + 1, x6);
        },
        error: function (xhr, status, error) {
          var responseText = xhr.responseText;
          console.log(responseText);
        }
      })
    }
  })
  localStorage.setItem("token", token);
</script>

</html>